<template>
    <div class="top">
        <el-input v-model="searchUser" class="w-30 m-2 input-with-select top_input" placeholder="输入用户名进行搜索"
            :prefix-icon="Search">
            <template #append>
                <el-button :icon="Search" @click="handleSearch" class="btn" />
            </template>
        </el-input>
        <el-button type="primary" plain @click="reload">重载列表</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true">添加用户</el-button>
        <el-dialog v-model="dialogFormVisible" label-position="top" title="添加用户" width="400px" label-width="80px">
            <el-form :model="form">
                <el-form-item label="用户">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="类型">
                    <!-- <el-input v-model="form.type" autocomplete="off" :value="`${props.type}`" disabled /> -->
                    <el-select v-model="form.type" placeholder="请选择用户类型">
                        <el-option label="普通用户" value="common" />
                        <el-option label="交管部门" value="traffic" />
                    </el-select>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <el-table :data="props.userList.slice((currentPage - 1) * pageSize, (currentPage * pageSize))" stripe
        style="width: 100%" height="465px">
        <el-table-column prop="id" label="ID" width="180" align="center" />
        <el-table-column prop="username" label="用户名" width="180" align="center" />
        <el-table-column prop="type" label="用户类型" width="180" align="center" />
        <el-table-column prop="isOnline" label="在线状态" width="180" align="center">
            <template #default="scope">
                <el-switch v-model="scope.row.isOnline" @change="handleOnline(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" background layout="total, prev, pager, next"
            :total="props.userList.length" @current-change="handleCurrentChange" />
        <el-button type="info" @click="close">关闭</el-button>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { ref, reactive, inject } from 'vue'
import { getDelete, getRegister, getLogin, getLogout } from '../../api/index'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
    userList: Array,
})
const emit = defineEmits(['update', 'search'])
/* 搜索功能 */
const searchUser = ref('')
const handleSearch = () => {
    emit('search', searchUser.value)
}
/* 添加用户 */
const dialogFormVisible = ref(false)
const form = reactive({
    username: "",
    type: "",
    password: ""
})
const addUser = async () => {
    dialogFormVisible.value = false
    const res = await getRegister(form)
    if (res.code == 200) {
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        emit('update')
    } else if (res.code == 400) {
        ElMessage({
            message: `${res.msg}`,
            type: 'warning',
        })
    } else {
        ElMessage({
            message: '服务器请求错误, 请稍后再试',
            type: 'warning',
        })
    }
}
/* 重载列表 */
const reload = () => {
    emit('update')
}
/* 处理在线状态 */
const handleOnline = async (row) => {
    console.log(row, 'online')
    if (row.isOnline === true) {
        const res = await getLogin(row)
        if (res.code == 200) {
            ElMessage({
                message: '上线成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '服务器请求错误,请稍后再试',
                type: 'warning',
            })
        }
    } else if (row.isOnline === false) {
        const res = await getLogout(row)
        if (res.code == 200) {
            ElMessage({
                message: '下线成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '服务器请求错误,请稍后再试',
                type: 'warning',
            })
        }
    }
}
/* 删除按钮 */
const handleDelete = async (row) => {
    const res = await getDelete(row)
    console.log(res, 'delete')
    if (res.code == 200) {
        emit('update')
        ElMessage({
            message: `${res.msg}`,
            type: 'success',
        })
    } else if (res.code == 400) {
        ElMessage({
            message: `${res.msg}`,
            type: 'warning',
        })
    } else {
        ElMessage({
            message: '服务器请求错误, 请稍后再试',
            type: 'warning',
        })
    }
}

/* 分页器 */
const currentPage = ref(1)
const pageSize = ref(10)
const handleCurrentChange = (val) => {
    currentPage.value = val
}
/* 关闭按钮 */
let isShowUser = inject("isShowUser")
const close = () => {
    isShowUser.value = !isShowUser.value
}

</script>

<style lang="scss" scoped>
.top {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;

    .btn:hover {
        color: #FFF;
        background-color: #006dff;
        border-radius: none;
    }

}

.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>